<!--
category nav 

-->

<template>
	<view class="category-container">
		<uv-tabs
			:list="categoryList"
			:current="currentTab"
			:currentTabType="currentTabType"
			@change="onTabChange"
			lineColor="$uv-primary"
			activeStyle="color:$uv-primary;font-weight:bold;"
			style="margin-bottom: 30rpx;"
		/>
		<!-- <view v-if="currentTab === 0">
			<view class="mock-content">这里是全部内容的模拟展示</view>
		</view> -->
	</view>
</template>

<script>
	
	export default {
        name: 'TmpCategoryNav',
		props: {
			title: String,
			list: {
				type: Array,
				default: () => []
			},
			colorData: String, // yellow/blue/gray/green,
			categoryLevel: String,
			currentTab: {
				type: Number,
				default : 0
			},
			currentTabType: String
		},
		setup(props, context) {
			//跨组件传递的msg
			// const categoryList = props.list.map(item => ({ name: item.category_name }));
			// return {
			// 	categoryList,
			// }
		},
		data(props, context) {
			return {
				originalCategoryList : props.list,
				categoryList: props.list.map(item => ({ name: item.category_name })),
				currentTab: props.currentTab,
				currentTabType: props.currentTabType,
				currentCategoryCode: '', //当前点击的category code
			}
		},
		watch: {
			list(newValue) {
				//console.log('tmp-category-nav watch', newValue);
				this.originalCategoryList = newValue;
				this.categoryList = newValue.map(item => ({ name: item.category_name }))
			},
			currentTab(newValue){
				console.log('currentTab变化', newValue);
				this.currentTab = newValue;
			},
			currentTabType(newValue) {

				console.log('currentTabType', newValue);

				this.currentTabType = newValue
			}
		},
		methods: {
			onTabChange(e) {
				
				this.currentTab = typeof e === 'object' ? e.index : e

				if (this.originalCategoryList && this.originalCategoryList.length > 0 && this.currentTab < this.originalCategoryList.length) {
					this.currentCategoryCode = this.originalCategoryList[this.currentTab].category_code;
				} else {
					this.currentCategoryCode = '';
				}
				

				console.log(this.currentTab);
				this.$emit('parentEvent', this.currentCategoryCode);
			},
		},
		created() {
			//console.log('TmpCategoryNav接收到的数据：', this.list);
		}
	}
</script>

<style scoped>
.category-container {
	background: #fff;
	/* min-height: 100vh; */
	padding: 0rpx 24rpx;
}
.mock-content {
	background: #f6f7fa;
	border-radius: 16rpx;
	padding: 48rpx 0;
	text-align: center;
	color: #333;
	font-size: 32rpx;
	margin-bottom: 32rpx;
}
</style>
